{extend name="public/base" /}
{block name="body"}
<div class="ibox float-e-margins">
<div class="content-tabs">
	<ol class="breadcrumb">
		<li>
			<a href="{:url('index/index')}"><i class="fa fa-home"></i></a>
		</li>
		<li><strong>商家统计</strong></li>
	</ol>
</div>
	<div class="ibox-content">
		<form id="myForm" class="form-horizontal m-t" method="post" action="{:url('index')}">
			<div class="order-info panel panel-default">
				<div class="panel-heading">
					<strong><i class="fa fa-bar-chart" style="color:#f70;"></i>&nbsp;&nbsp;商家入驻统计</strong>&nbsp;&nbsp;
				</div>
				<div class="panel-body clearfix">
					<div class="info-group">
						<span class="h4">
							{$todaysum}
						</span>
						<span class="info-description">今日入驻</span>
					</div>
					<div class="info-group">
						<span class="h4">
							{$weeksum}
						</span>
						<span class="info-description">7天入驻</span>
					</div>
					<div class="info-group">
						<span class="h4">
							{$monthsum}
						</span>
						<span class="info-description">本月入驻</span>
					</div>	
					<div class="info-group">
						<span class="h4">
							{$sum}
						</span>
						<span class="info-description">总计入驻</span>
					</div>
				</div>
			</div>	
			<!--统计图-->
			<div id="main" style="width: 100%;height:400px;"></div>
       </form>    
	</div>
</div>
{/block} {block name="script"}
<script src="__JS__/jquery.form.js"></script>
<script src="__LIB__/validate/jquery.validate.min.js"></script>
<script src="__LIB__/validate/messages_zh.min.js"></script>
<script src="__LIB__/validate/add_validate.min.js"></script>
<script src="__LIB__/fileinput/js/fileinput.min.js"></script>
<script src="__LIB__/fileinput/js/locales/zh.js"></script>
<script src="__JS__/echarts.common.min.js"></script>
<style>
	.order-info .info-group{width:25%; text-align:center; float:left;}
	.order-info .info-group+.info-group{border-left:1px dotted #ccc; }
	.h4{font-size:22px; display:block;}
	
	
</style>
<script>
	var myChart = echarts.init(document.getElementById('main'));

	function randomData() {
    now = new Date(+now + oneDay);
    value = value + Math.random() * 21 - 10;
    return {
        name: now.toString(),
        value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
            Math.round(value)
        ]
    }
	}

	var dqdate = new Date();
	var data = [];
	var now = +new Date(dqdate.getFullYear(),1);
	var oneDay = 24 * 3600 * 1000;
	var value = Math.random() * 1000;
	for (var i = 0; i < 1000; i++) {
	    data.push(randomData());
	}

	option = {
	    title: {
	        text: '商家入驻'
	    },
	    tooltip: {
	        trigger: 'axis',
	        formatter: function (params) {
	            params = params[0];
	            var date = new Date(params.name);
	            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
	        },
	        axisPointer: {
	            animation: false
	        }
	    },
	    xAxis: {
	        type: 'time',
	        splitLine: {
	            show: false
	        }
	    },
	    yAxis: {
	        type: 'value',
	        boundaryGap: [0, '100%'],
	        splitLine: {
	            show: false
	        }
	    },
	    series: [{
	        name: '模拟数据',
	        type: 'line',
	        showSymbol: false,
	        hoverAnimation: false,
	        data: data
	    }]
	};
	
	setInterval(function () {
	
	    for (var i = 0; i < 1; i++) {
	        data.shift();
	        data.push(randomData());
	    }
	
	    myChart.setOption(option);
	}, 1000);
</script>
{/block}